<section class="header clearfix">
  {{#if isView}}
    <div class="right-buttons">
      {{action-menu model=model size="sm"}}
    </div>
  {{/if}}
  <h1>
    {{t (concat "editDns.title." mode) name=model.displayName}}
  </h1>
</section>

<section class="horizontal-form container-fluid">
  <div class="row">
    <div class="col span-6">
      {{form-name-description
        model=model
        namePlaceholder="editDns.name.placeholder"
        nameRequired=true
        descriptionPlaceholder="editDns.description.placeholder"
        editing=editing
      }}
    </div>
    <div class="col span-6 pt-5">
      {{form-namespace
        editable=isNew
        namespace=namespace
        errors=namespaceErrors
        registerHook=(action "registerHook")
        editing=editing
      }}
    </div>
  </div>

  <div class="row">
    <div class="col span-6">
      <div>
        <label class="acc-label">
          {{t "editDns.recordType.label"}}
        </label>
      </div>
      <div>
        {{#if editing}}
          <div class="radio">
            <label class="acc-label">
              {{radio-button selection=recordType value="arecord"}}&nbsp;{{t "editDns.recordType.arecord"}}
            </label>
          </div>
          <div class="radio">
            <label class="acc-label">
              {{radio-button selection=recordType value="cname"}}&nbsp;{{t "editDns.recordType.cname"}}
            </label>
          </div>
          <div class="radio">
            <label class="acc-label">
              {{radio-button selection=recordType value="alias"}}&nbsp;{{t "editDns.recordType.alias"}}
            </label>
          </div>
          <div class="radio">
            <label class="acc-label">
              {{radio-button selection=recordType value="workload"}}&nbsp;{{t "editDns.recordType.workload"}}
            </label>
          </div>
          <div class="radio">
            <label class="acc-label">
              {{radio-button selection=recordType value="selector"}}&nbsp;{{t "editDns.recordType.selector"}}
            </label>
          </div>
        {{else}}
          {{t (concat "editDns.recordType." recordType)}}
        {{/if}}
      </div>
    </div>
    <div class="col span-6">
      {{#if (eq recordType "arecord")}}
        {{form-value-array
          initialValues=model.ipAddresses
          addActionLabel="editDns.add.arecord"
          valueLabel="editDns.target.arecord"
          valuePlaceholder="editDns.placeholder.arecord"
          changed=(action (mut model.ipAddresses))
          editing=editing
        }}
      {{else if (eq recordType "cname")}}
        <label class="acc-label">
          {{t "editDns.target.cname"}}{{field-required}}
        </label>
        {{input
          value=model.hostname
          placeholder=(t "editDns.placeholder.cname")
        }}
      {{else if (eq recordType "alias")}}
        {{#form-value-array
           initialValues=model.targetDnsRecordIds
           editing=(not isView)
           addActionLabel="editDns.add.alias"
           changed=(action "setAlias")
           as |c row|
        }}
          {{new-select
            classNames="form-control"
            optionValuePath="id"
            optionLabelPath="nameWithType"
            prompt="editDns.prompt.alias"
            optionGroupPath="namespaceId"
            localizedPrompt=true
            content=dnsRecords
            value=row.value
            disabled=isView
            showProTip=false
            editing=editing
          }}
        {{/form-value-array}}
      {{else if (eq recordType "workload")}}
        {{#form-value-array
           editing=(not isView)
           initialValues=model.targetWorkloadIds
           addActionLabel="editDns.add.workload"
           changed=(action "setWorkload")
           as |c row|
        }}
          {{new-select
            classNames="form-control-static"
            optionValuePath="id"
            optionLabelPath="displayName"
            prompt="editDns.prompt.workload"
            localizedPrompt=true
            content=workloadsChoices
            value=row.value
            showProTip=false
            editing=editing
            disabled=isView
          }}
        {{/form-value-array}}
      {{else if (eq recordType "selector")}}
        {{form-key-value
          initialMap=model.selector
          changed=(action "setSelector")
          addActionLabel="editDns.selector.addActionLabel"
          keyLabel="editDns.selector.keyLabel"
          editing=editing
        }}
      {{/if}}
    </div>
  </div>
</section>

{{#advanced-section advanced=advanced}}
  {{#if showMoreOptions}}
    <hr class="mt-30 mb-30" />

    <div class="row mb-20">
      <div class="col span-6">
        <label class="acc-label pb-5">
          {{t "editDns.kind.label"}}
        </label>
        {{new-select
          classNames="form-control"
          content=kindChoices
          value=kind
          localizedLabel=true
          disabled=(not editing)
        }}
      </div>
      {{#unless isHeadless}}
        <div class="col span-6">
          {{form-value-array
            initialValues=model.externalIPs
            addActionLabel="editDns.externalIPs.addActionLabel"
            valueLabel="editDns.externalIPs.value"
            valuePlaceholder="editDns.externalIPs.placeholder"
            changed=(action (mut model.externalIPs))
            editing=editing
          }}
        </div>
      {{/unless}}
    </div>
    {{#unless isHeadless}}
      <div class="row mb-20">
        {{#if (or (eq model.kind "LoadBalancer") (eq model.kind "NodePort")) }}
          <div class="col span-6">
            <label class="acc-label">
              {{t "editDns.externalTrafficPolicy.label"}}
            </label>
            {{#input-or-display
               editable=editing
               value=model.externalTrafficPolicy
            }}
              <div class="radio">
                <label>
                  {{radio-button
                    selection=model.externalTrafficPolicy
                    value="Local"
                  }} {{t "editDns.externalTrafficPolicy.local"}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{radio-button
                    selection=model.externalTrafficPolicy
                    value="Cluster"
                  }} {{t "editDns.externalTrafficPolicy.cluster"}}
                </label>
              </div>
            {{/input-or-display}}
          </div>
        {{/if}}
        <div class="col span-6">
          <label class="acc-label">
            {{t "editDns.publishNotReadyAddresses.label"}}
          </label>
          {{#input-or-display
             editable=editing
             value=model.publishNotReadyAddresses
          }}
            <div class="radio">
              <label>
                {{radio-button
                  selection=model.publishNotReadyAddresses
                  value=false
                }} {{t "editDns.publishNotReadyAddresses.readyOnly"}}
              </label>
            </div>
            <div class="radio">
              <label>
                {{radio-button
                  selection=model.publishNotReadyAddresses
                  value=true
                }} {{t "editDns.publishNotReadyAddresses.all"}}
              </label>
            </div>
          {{/input-or-display}}
        </div>
      </div>
    {{/unless}}
    {{#if (eq model.kind "LoadBalancer")}}
      <div class="row mb-20">
        <div class="col span-6">
          <label class="acc-label pb-5">
            {{t "editDns.loadBalancerIP.label"}}
          </label>
          {{#input-or-display
             editable=editing
             value=model.loadBalancerIP
          }}
            {{input class="form-control input-sm"
              type="text"
              value=model.loadBalancerIP
              placeholder=(t "editDns.loadBalancerIP.placeholder")
            }}
          {{/input-or-display}}
        </div>
        <div class="col span-6">
          {{form-value-array
            initialValues=model.loadBalancerSourceRanges
            addActionLabel="editDns.loadBalancerSourceRanges.addActionLabel"
            valueLabel="editDns.loadBalancerSourceRanges.value"
            valuePlaceholder="editDns.loadBalancerSourceRanges.placeholder"
            changed=(action (mut model.loadBalancerSourceRanges))
            editing=editing
          }}
        </div>
      </div>
      {{#if (eq model.externalTrafficPolicy "Local")}}
        <div class="row mb-20">
          <div class="col span-6">
            <label class="acc-label pb-5">
              {{t "editDns.healthCheckNodePort.label"}}
            </label>
            {{input-integer
              min="0"
              max="65535"
              step="1"
              value=model.healthCheckNodePort
              classNames="form-control"
              placeholder=(t "editDns.healthCheckNodePort.placeholder")
            }}
          </div>
        </div>
      {{/if}}
    {{/if}}
  {{/if}}

  <hr class="mt-30 mb-30" />

  {{form-service-ports
    model=model
    editing=editing
  }}

  <hr class="mt-30 mb-30" />

  {{#accordion-list showExpandAll=false as | al expandFn |}}
    {{form-labels-annotations
      classNames="accordion-wrapper"
      expandAll=al.expandAll
      expandFn=expandFn
      initialLabels=model.labels
      model=model
      editing=editing
      setLabels=(action "setLabels")
    }}
    {{#if showSessionAffinity}}
      {{#accordion-list-item
         title=(t "editDns.sessionAffinity.title")
         detail=(t "editDns.sessionAffinity.detail")
         expandAll=al.expandAll
         expand=(action expandFn)
      }}
        <div class="row box">
          <div class="col span-6">
            <label class="acc-label">
              {{t "editDns.sessionAffinity.label"}}
            </label>
            {{#input-or-display editable=editing value=model.sessionAffinity}}
              <div class="radio">
                <label>
                  {{radio-button
                    selection=model.sessionAffinity
                    value="None"
                  }} {{t "generic.no"}}
                </label>
              </div>
              <div class="radio">
                <label>
                  {{radio-button
                    selection=model.sessionAffinity
                    value="ClientIP"
                  }} {{t "generic.yes"}}
                </label>
              </div>
            {{/input-or-display}}
          </div>
          {{#if (eq model.sessionAffinity "ClientIP")}}
            <div class="col span-6">
              <label class="acc-label">
                {{t "editDns.sessionAffinityConfig.label"}}
              </label>
              {{#input-or-display
                 editable=editing
                 value=timeoutSeconds
                 classesForDisplay="text-muted form-control-static"
              }}
                <div class="input-group">
                  {{input-integer
                    min="1"
                    max="86400"
                    step="60"
                    value=timeoutSeconds
                    classNames="form-control"
                    placeholder=(t "editDns.sessionAffinityConfig.placeholder")
                  }}
                  <div class="input-group-addon bg-default">{{t "generic.seconds"}}</div>
                </div>
              {{/input-or-display}}
            </div>
          {{/if}}
        </div>
      {{/accordion-list-item}}
    {{/if}}
  {{/accordion-list}}
{{/advanced-section}}

{{#if editing}}
  {{top-errors errors=errors}}
  {{save-cancel
    editing=isEdit
    save=(action "save")
    cancel=cancel
  }}
{{/if}}
